<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-select
        v-model="pageDto.where.openType"
        class="filter-item"
        placeholder="开放类型"
        clearable
      >
        <el-option
          v-for="item in openTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-date-picker
        v-model="pageDto.where.startTime"
        class="filter-item"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="考试开始时间"
      />

      <el-date-picker
        v-model="pageDto.where.endTime"
        class="filter-item"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="考试结束时间"
      />

      <el-input
        v-model="pageDto.where.title"
        placeholder="搜索考试名称"
        style="width: 200px"
        class="filter-item"
      />
      <el-button type="primary" @click="search()">查询</el-button>
      <el-button type="primary" @click="goExamAdd()">添加</el-button>
    </el-form>

    <el-table :data="examList" stripe style="width: 100%" ref="repotable">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="title" label="考试名称" width="200">
      </el-table-column>
      <el-table-column prop="openType" label="考试类型">
        <template slot-scope="scope">
          <div>{{ scope.row.openType | examOpenType }}</div>
        </template>
      </el-table-column>
      <el-table-column label="时间限制" width="300">
        <template slot-scope="scope">
          <div>
            {{
              scope.row.timeLimit == 0
                ? '不限制'
                : scope.row.startTime + '~' + scope.row.endTime
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="totalScore" label="考试总分"> </el-table-column>
      <el-table-column prop="qualifyScore" label="及格线"> </el-table-column>
      <el-table-column prop="qualifyScore" label="考试状态">
        <template slot-scope="scope">
          <div>{{ scope.row.state | examStateFilter }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <div slot-scope="scope">
          <el-button
            @click="del(scope.row.id)"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
          <el-button
            @click="edit(scope.row)"
            size="small"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
        </div>
      </el-table-column>
    </el-table>
    <br /><br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageDto.now"
      :page-sizes="[3, 5, 50, 100]"
      :page-size="pageDto.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { page } from '@/api/exam'
export default {
  data () {
    return {
      openTypes: [
        {
          value: 1,
          label: '完全开放'
        },
        {
          value: 2,
          label: '部门开放'
        },
        {
          value: 3,
          label: '指定用户'
        }
      ],
      pageDto: {
        now: 1,
        size: 5,
        where: {}
      },
      examList: [],
      total: 0,
      dialogFormVisible: false,
      repoForm: {
        title: '',
        remark: ''
      }
    }
  },
  methods: {
    search () {
      this.pageDto.now = 1
      page(this.pageDto).then(res => {
        console.log(res)
        this.examList = res.list
        this.total = res.total
      })
    },

    save () {
      add(this.repoForm).then(res => {
        if (res.code == 0) {
          this.$notify({
            title: '成功',
            message: res.msg,
            type: 'success'
          })
        } else {
          this.$notify({
            title: '失败',
            message: res.msg,
            type: 'error'
          })
        }

        //刷新表格
        this.search()

        //hide dialog
        this.dialogFormVisible = false
      })
    },
    edit (row) {
      this.dialogFormVisible = true

      this.repoForm = row
    },
    del (repoId) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del(repoId).then(res => {
            if (res.code == 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              })
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              })
            }

            //刷新表格
            this.search()
          })
        })
        .catch(() => {})
    },

    delBatch () {
      //获取ids
      console.log(this.$refs.repotable.selection)
      var ids = []
      this.$refs.repotable.selection.forEach(item => {
        ids.push(item.id)
      })

      console.log(ids)
      //交互
      delBat(ids).then(res => {
        if (res.code == 0) {
          this.$notify({
            title: '成功',
            message: res.msg,
            type: 'success'
          })
        } else {
          this.$notify({
            title: '失败',
            message: res.msg,
            type: 'error'
          })
        }
      })
      this.search()
    },

    handleSizeChange (size) {
      //pageSize 改变时会触发
      this.pageDto.size = size
      page(this.pageDto).then(res => {
        this.examList = res.list
        this.total = res.total
      })
    },
    handleCurrentChange (now) {
      //currentPage 改变时会触发
      this.pageDto.now = now
      page(this.pageDto).then(res => {
        this.examList = res.list
        this.total = res.total
      })
    },

    goExamAdd () {
      this.$router.push('/exam/edit')
    }
  },
  created () {
    this.search()
  }
}
</script>
